import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Image, ScrollView, TouchableOpacity } from 'react-native';


import {
    Tabs, Icon, Button,
    Modal,
    WhiteSpace,
    WingBlank,
    Toast, Flex, Tag, DatePicker, List, Picker

} from '@ant-design/react-native';
const Item = List.Item;
const Brief = Item.Brief;
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const styles = StyleSheet.create({

    tabText: {
        fontSize: 10,
        color: "#000",
    },
    tabValText: {
        fontSize: 12,
        color: "#ccc",
        textAlign: "right"
    },
    titleText: {
        fontSize: 12,
        color: "#B8B8B8"
    }

});
export default class MyVideo extends Component {


    onClose2 = () => {
        this.setState({
            visible2: false,

        });
    };
    onClose3 = () => {
        this.setState({
            visible3: false,
        });
    };
    state = {
        date: now,
        visible2: false,
        visible3: false,
        tabstate: 0,
        value: undefined,
        sValue: [],
        pickerValue: [],
        pickerValue1: [],
    };


    ontabs = (v, b) => {
        console.log(v, b)
        this.setState({
            tabstate: b
        })
    }

    onDatePicker = (value) => {
        console.log(value)
        this.setState({ value });
    };
    render() {


        const tabs = [
            {
                title: "实时视频",

            },
            { title: "历史视频" },

        ];
        const style = {
            alignItems: 'center',
            justifyContent: 'center',
            flex: 1,
            backgroundColor: '#fff',
        };

        const topClire3 = [
            {
                name: 1
            },
            {
                name: 1
            },
            {
                name: 1
            },
            {
                name: 1
            },
        ]

        const seasons = [

            {
                label: '#1企业',
                value: '#1企业',
            },
            {
                label: '#2企业',
                value: '#2企业',
            },

        ];

        const seasons1 = [

            {
                label: '#1燃气站',
                value: '#1燃气站',
            },
            {
                label: '#2燃气站',
                value: '#2燃气站',
            },

        ];



        return (

            <Tabs tabs={tabs} style={{ backgroundColor: "#ccc", color: "#000" }} onChange={this.ontabs}>

                <View style={{ flex: 1 }}>
                    <View style={{ marginTop: 10, marginBottom: 10 }}>
                        <List>

                            <Picker
                                data={seasons}
                                cols={1}
                                value={this.state.pickerValue}
                                onChange={v => this.setState({ pickerValue: v })}
                                onOk={v => this.setState({ pickerValue: v })}
                            >
                                <Item thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png" arrow="horizontal">企业选取</Item>
                            </Picker>

                            <Picker
                                data={seasons1}
                                cols={1}
                                value={this.state.pickerValue1}
                                onChange={v => this.setState({ pickerValue1: v })}
                                onOk={v => this.setState({ pickerValue1: v })}
                            >
                                <Item
                                    thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
                                    arrow="horizontal"
                                >站点选取</Item>
                            </Picker>
                        </List>
                    </View>
                    <ScrollView
                        style={{ flex: 5, paddingTop: 10, backgroundColor: "#fff" }}  >
                        <View style={{ flex: 1, display: "flex", flexDirection: "row", flexWrap: "wrap", justifyContent: "space-around" }}>
                            {
                                topClire3.map((item, index) => {
                                    return (
                                        <View key={index}

                                        >
                                            <TouchableOpacity
                                                style={{ width: 150, height: 100, borderRadius: 10, backgroundColor: "#ccc", marginTop: 10 }}
                                                activeOpacity={0.5}

                                                onPress={() => this.props.navigation.navigate('Video_Details')}
                                            >

                                            </TouchableOpacity>
                                            <Text>#1摄像头</Text>
                                        </View>
                                    )
                                })
                            }
                        </View>





                    </ScrollView>
                </View>




                <View style={{ flex: 1 }} >
                    <View style={{ marginTop: 10, marginBottom: 10 }}>
                        <List>

                            <Picker
                                data={seasons}
                                cols={1}
                                value={this.state.pickerValue}
                                onChange={v => this.setState({ pickerValue: v })}
                                onOk={v => this.setState({ pickerValue: v })}
                            >
                                <Item thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png" arrow="horizontal">企业选取</Item>
                            </Picker>

                            <Picker
                                data={seasons1}
                                cols={1}
                                value={this.state.pickerValue1}
                                onChange={v => this.setState({ pickerValue1: v })}
                                onOk={v => this.setState({ pickerValue1: v })}
                            >
                                <Item
                                    thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
                                    arrow="horizontal"
                                >站点选取</Item>
                            </Picker>
                            <Picker
                                data={seasons1}
                                cols={1}
                                value={this.state.pickerValue1}
                                onChange={v => this.setState({ pickerValue1: v })}
                                onOk={v => this.setState({ pickerValue1: v })}
                            >
                                <Item
                                    thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
                                    arrow="horizontal"
                                >摄像头选取</Item>
                            </Picker>
                            <DatePicker
                                value={this.state.date}
                                onChange={date => this.setState({ date })}
                            >
                                <Item
                                    thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
                                    arrow="horizontal">开始时间</Item>
                            </DatePicker>
                            <DatePicker
                                value={this.state.date}
                                onChange={date => this.setState({ date })}
                            >
                                <Item
                                    thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
                                    arrow="horizontal">结束时间</Item>
                            </DatePicker>
                        </List>
                    </View>
                    <View style={{ flex: 1, backgroundColor: "#fff" }}></View>

                </View>
            </Tabs>
        )
    }
}

